import React, { Component } from 'react';
import styles from './index.less';
import normal from '@/assets/normal.svg';
import RcLineChart from '../common/lineChart/index.jsx';
class PowerRate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      leftY: [],
      xData: [],
      isSucess: false,
      legendName: [],
      legendLength: 1,
      title: [],
    };
  }
  componentDidMount() {
    // this.handleFull()
  }
  componentWillReceiveProps(nextProps) {
    let x = [],
      y1 = [],
      y2 = [];
    if (
      nextProps?.data &&
      nextProps.data?.content &&
      nextProps.data.content.length > 0
    ) {
      nextProps.data.content.forEach((item, index) => {
        x.push(item.x);
        y1.push(item.P_total);
        y2.push(item.S_total);
      });
      this.setState({
        title: nextProps.data.title,
        xData: x,
        leftY: [y1, y2],
        isSucess: true,
        legendLength: 2,
      });
    }
  }
  handleFull() {
    if (screenfull.isEnabled) {
      screenfull.toggle();
    }
  }
  render() {
    const { leftY, xData, isSucess, legendLength } = this.state;
    return (
      <div className={styles.powerRate} style={{ marginTop: '.15rem' }}>
        <div className={styles.title}>
          <img src={normal} alt="" />
          今日用电情况
        </div>
        <div className={styles.echarts}>
          <RcLineChart
            isSuccess={isSucess}
            id={'linecharts1234'}
            legendName={['有功功率', '视在功率']}
            xData={xData}
            yData={leftY}
            legendLength={legendLength}
            YaxisTick={false}
            lineShow={false}
            // yAxis={{show:false,type:"value"}}
            grid={{ left: '3%', right: '2%', width: '90%', bottom: '4%' }}
            color={['#52c784', '#2d89e9']}
            legendTextColor={'white'}
            fontSize={12}
            interval={10}
          />
        </div>
      </div>
    );
  }
}
export default PowerRate;
